<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="用户名" v-model="filters.like$nickname"></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button>
    </div>
    <el-table :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80">
      </el-table-column>



      <el-table-column prop="userId" align="center" label="评论用户" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.nickname}}</span>
        </template>
      </el-table-column>

        <el-table-column  prop="goodsTitle" align="center" label="评论商品" width="140">
          <template slot-scope="scope">
            <span>{{scope.row.goodsTitle}}</span>
          </template>
        </el-table-column>


      <el-table-column prop="score" align="center" label="描述评分" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.descScore}}分</span>
        </template>
      </el-table-column>
      <el-table-column prop="score" align="center" label="物流评分" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.expressScore}}分</span>
        </template>
      </el-table-column>
      <el-table-column prop="score" align="center" label="态度评分" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.atitudeScore}}分</span>
        </template>
      </el-table-column>
      <el-table-column prop="score" align="center" label="平均评分" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.score}}分</span>
        </template>
      </el-table-column>
      <el-table-column prop="score" align="center" label="评语" width="220">
        <template slot-scope="scope">
          <span>{{scope.row.content}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="createTime" align="center" label="评论时间" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isAuthed" align="center" label="评论状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isAuthed | isAuthedStatus">{{scope.row.isAuthed?'已审核':'待审核'}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="mini" v-if="scope.row.isAuthed==false" @click="doAuth(scope.row)"  type="primary">审核通过</el-button>
          <el-button size="mini" v-else type="success"  @click="doUnAuth(scope.row)">审核拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      temp: {
        id: "",

        userId: "",

        goodsId: "",

        score: ""
      },

      rules: {
        userId: [
          {
            required: true,
            message: "评论用户不能为空",
            trigger: "change"
          }
        ],

        goodsId: [
          {
            required: true,
            message: "评论商品不能为空",
            trigger: "change"
          }
        ],

        score: [
          {
            required: true,
            message: "评分不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.init("goods_comments", 1).loadData();
  },
  filters: {
    isAuthedStatus(status) {
      if (status) {
        return "success";
      }
      return "danger";
    }
  },
  methods: {
    doAuth(item) {
      this.$$comfirm("确实审核通过吗？", () => {
        this.$post("/admin/goods_comments/doAuth", { id: item.id }).then(_ => {
          item.isAuthed = true;
          this.$$notify();
        });
      });
    },
    doUnAuth(item) {
      this.$$comfirm("确实审核拒绝吗？", () => {
        this.$post("/admin/goods_comments/doUnAuth", { id: item.id }).then(
          _ => {
            item.isAuthed = false;
            this.$$notify();
          }
        );
      });
    },
    exportExcelFile() {
      this.exportExcel({
        title: "商品评论",
        fields: [
          {
            field: "userId",
            title: "评论用户"
          },

          {
            field: "goodsId",
            title: "评论商品"
          },

          {
            field: "score",
            title: "评分"
          },

          {
            field: "createTime",
            title: "评论时间"
          }
        ]
      }).then(info => {
        this.openWin(info);
      });
    }
  }
};
</script>
